<template>
    <div>
        <h1>5 Notice</h1>
        <h2>5.1 quick start</h2>
        <a target="_blank" href="https://element.eleme.cn/#/zh-CN/component/alert">alert手册</a>
        </br>
        <a target="_blank" href="https://element.eleme.cn/#/zh-CN/component/loading">loading手册</a>
        </br>
        <a target="_blank" href="https://element.eleme.cn/#/zh-CN/component/message">message手册</a>
        </br>
        <a target="_blank" href="https://element.eleme.cn/#/zh-CN/component/notification">notification手册</a>
        </br>
        <h2>5.2 alert 警告提示</h2>
        </br></br>
        <el-alert title="alert:success" type="success" description="supplication message" effect="light"></el-alert>
        <el-alert title="alert:info" type="info" effect="light" show-icon>
            <div slot>supplication messages</div>
        </el-alert>
        <el-alert title="alert:warning" type="warning" description="supplication message" effect="dark" :closable="true"
            close-text="ok"></el-alert>
        <el-alert title="alert:error" type="error" effect="dark" show-icon center></el-alert>
        <h2>5.3 message 提示</h2>
        </br></br>
        <p>message不存在任何标签，是通过js代码直接调用生成的</p>
        </br>
        <el-button type="primary" @click="showMessage">show message</el-button>
        <el-button type="primary" @click="openVn">customized message</el-button>
        </br>
        <p>message中的所有属性都应设置在$message传入的对象中，包括：</p>
        <p>type, center, showClose, iconClass etc.</p>
        </br>
        <el-button :plain="true" @click="showCustomized">customized message</el-button>
        <el-button :plain="true" @click="closeCustomized">close message</el-button>
        </br>
    </div>

</template>
<script>
export default {
    name: "Notice",
    data() {
        return {

        }
    },
    methods: {
        showMessage() {
            this.$message("this is a message info")
        },
        openVn() {
            const h = this.$createElement;
            this.$message({
                message: h('p', null, [
                    h('span', null, 'new order placed successfully! '),
                    h('i', { style: 'color: teal' }, 'orderNo.')
                ])
            });
        },
        showCustomized() {
            this.$message({
                message: "customized message",
                type: 'success',
                showClose: 'true',
                center: 'true',
                iconClass: "el-icon-user-solid",
                duration:0,
            })
        },
        closeCustomized(){
            this.$message.closeAll();
        },
    }
}
</script>
<style scoped>
div {
    width: 1020px;
}
</style>